ನ್ಯಾವಿಗೇಷನ್ API ಯಲ್ಲಿ ಪ್ರಾವೀಣ್ಯತೆ: ಏಕ ಪುಟ ಅಪ್ಲಿಕೇಶನ್ ರೂಟಿಂಗ್ ಮತ್ತು ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್

ನ್ಯಾವಿಗೇಷನ್ API ಏಕ ಪುಟ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ (SPAs) ರೂಟಿಂಗ್ ಮತ್ತು ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಅನ್ನು ನಾವು ನಿರ್ವಹಿಸುವ ವಿಧಾನದಲ್ಲಿ ಒಂದು ಗಮನಾರ್ಹ ಸುಧಾರಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳು ಸಾಮಾನ್ಯವಾಗಿ `window.location` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸುವುದರ ಮೇಲೆ ಅಥವಾ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಲೈಬ್ರರಿಗಳನ್ನು ಅವಲಂಬಿಸಿವೆ. ಈ ವಿಧಾನಗಳು ನಮಗೆ ಉತ್ತಮವಾಗಿ ಸೇವೆ ಸಲ್ಲಿಸಿದ್ದರೂ, ನ್ಯಾವಿಗೇಷನ್ API ಹೆಚ್ಚು ಸುಸಂಘಟಿತ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯ-ಸಮೃದ್ಧ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಬಳಕೆದಾರರ ನ್ಯಾವಿಗೇಷನ್ ಅನುಭವದ ಮೇಲೆ ಹೆಚ್ಚಿನ ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ನ್ಯಾವಿಗೇಷನ್ API ಎಂದರೇನು?

ನ್ಯಾವಿಗೇಷನ್ API ಒಂದು ಆಧುನಿಕ ಬ್ರೌಸರ್ API ಆಗಿದ್ದು, ಇದು SPAs ನ್ಯಾವಿಗೇಷನ್, ರೂಟಿಂಗ್, ಮತ್ತು ಹಿಸ್ಟರಿಯನ್ನು ನಿರ್ವಹಿಸುವ ವಿಧಾನವನ್ನು ಸರಳಗೊಳಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಹೊಸ `navigation` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳನ್ನು ತಡೆಹಿಡಿಯಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು, URL ಅನ್ನು ನವೀಕರಿಸಲು, ಮತ್ತು ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳಿಲ್ಲದೆ ಸ್ಥಿರವಾದ ಬ್ರೌಸಿಂಗ್ ಹಿಸ್ಟರಿಯನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುವ ವಿಧಾನಗಳು ಮತ್ತು ಈವೆಂಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ವೇಗವಾದ, ಸುಗಮವಾದ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದನಾಶೀಲ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.

ನ್ಯಾವಿಗೇಷನ್ API ಬಳಸುವುದರ ಪ್ರಯೋಜನಗಳು

• ಸುಧಾರಿತ ಕಾರ್ಯಕ್ಷಮತೆ: ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುವ ಮೂಲಕ, ನ್ಯಾವಿಗೇಷನ್ APIಯು SPAs ಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ. ವಿಭಿನ್ನ ವೀಕ್ಷಣೆಗಳ ನಡುವಿನ ಪರಿವರ್ತನೆಗಳು ವೇಗವಾಗಿ ಮತ್ತು ಸುಗಮವಾಗಿರುತ್ತವೆ, ಇದು ಹೆಚ್ಚು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಹೆಚ್ಚಿದ ನಿಯಂತ್ರಣ: ಈ APIಯು ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳ ಮೇಲೆ ಸೂಕ್ಷ್ಮ-ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿರುವಂತೆ ನ್ಯಾವಿಗೇಷನ್ ವರ್ತನೆಯನ್ನು ತಡೆಹಿಡಿಯಲು ಮತ್ತು ಮಾರ್ಪಡಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ನ್ಯಾವಿಗೇಷನ್ ತಡೆಯುವುದು, ಬಳಕೆದಾರರನ್ನು ಮರುನಿರ್ದೇಶಿಸುವುದು, ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಮೊದಲು ಅಥವಾ ನಂತರ ಕಸ್ಟಮ್ ಲಾಜಿಕ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.
• ಸರಳೀಕೃತ ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್: ಬ್ರೌಸರ್‌ನ ಹಿಸ್ಟರಿ ಸ್ಟಾಕ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ನ್ಯಾವಿಗೇಷನ್ API ಯೊಂದಿಗೆ ಸುಲಭವಾಗಿದೆ. ಡೆವಲಪರ್‌ಗಳು ಪ್ರೋಗ್ರಾಮಿಕ್ ಆಗಿ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಗಳನ್ನು ಸೇರಿಸಬಹುದು, ಬದಲಾಯಿಸಬಹುದು ಮತ್ತು ಸಂಚರಿಸಬಹುದು, ಇದು ಸ್ಥಿರ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಬ್ರೌಸಿಂಗ್ ಅನುಭವವನ್ನು ಖಾತ್ರಿಗೊಳಿಸುತ್ತದೆ.
• ಘೋಷಣಾತ್ಮಕ ನ್ಯಾವಿಗೇಷನ್: ನ್ಯಾವಿಗೇಷನ್ APIಯು ರೂಟಿಂಗ್‌ಗೆ ಹೆಚ್ಚು ಘೋಷಣಾತ್ಮಕ ವಿಧಾನವನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಷನ್ ನಿಯಮಗಳು ಮತ್ತು ವರ್ತನೆಗಳನ್ನು ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ರೀತಿಯಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಕೋಡ್ ಓದುವಿಕೆಯನ್ನು ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಆಧುನಿಕ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ ಏಕೀಕರಣ: ನ್ಯಾವಿಗೇಷನ್ APIಯು ರಿಯಾಕ್ಟ್, ಆಂಗ್ಯುಲರ್, ಮತ್ತು ವೀವ್.ಜೆಎಸ್ ನಂತಹ ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ತಮ್ಮ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಭಿವೃದ್ಧಿ ಕೆಲಸದ ಹರಿವಿನೊಳಗೆ API ಯ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ವೈಶಿಷ್ಟ್ಯಗಳು

1. `navigation` ಆಬ್ಜೆಕ್ಟ್

ನ್ಯಾವಿಗೇಷನ್ API ಯ ಹೃದಯಭಾಗ `navigation` ಆಬ್ಜೆಕ್ಟ್ ಆಗಿದೆ, ಇದನ್ನು ಗ್ಲೋಬಲ್ `window` ಆಬ್ಜೆಕ್ಟ್ (`window.navigation` ಅಂದರೆ) ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದು. ಈ ಆಬ್ಜೆಕ್ಟ್ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ವಿವಿಧ ಪ್ರಾಪರ್ಟಿಗಳು ಮತ್ತು ವಿಧಾನಗಳಿಗೆ ಪ್ರವೇಶವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:

• `currentEntry`: ನ್ಯಾವಿಗೇಷನ್ ಹಿಸ್ಟರಿಯಲ್ಲಿನ ಪ್ರಸ್ತುತ ಎಂಟ್ರಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ `NavigationHistoryEntry` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• `entries()`: ನ್ಯಾವಿಗೇಷನ್ ಹಿಸ್ಟರಿಯಲ್ಲಿನ ಎಲ್ಲಾ ಎಂಟ್ರಿಗಳನ್ನು ಪ್ರತಿನಿಧಿಸುವ `NavigationHistoryEntry` ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಒಂದು ಸರಣಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.
• `navigate(url, { state, info, replace })`: ಹೊಸ URLಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತದೆ.
• `back()`: ಹಿಂದಿನ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಗೆ ಹಿಂತಿರುಗುತ್ತದೆ.
• `forward()`: ಮುಂದಿನ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಗೆ ಮುಂದುವರಿಯುತ್ತದೆ.
• `reload()`: ಪ್ರಸ್ತುತ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡುತ್ತದೆ.
• `addEventListener(event, listener)`: ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಈವೆಂಟ್‌ಗಳಿಗೆ ಈವೆಂಟ್ ಲಿಸನರ್ ಅನ್ನು ಸೇರಿಸುತ್ತದೆ.

2. `NavigationHistoryEntry`

`NavigationHistoryEntry` ಇಂಟರ್ಫೇಸ್ ನ್ಯಾವಿಗೇಷನ್ ಹಿಸ್ಟರಿಯಲ್ಲಿ ಒಂದೇ ಎಂಟ್ರಿಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಇದು ಎಂಟ್ರಿಯ ಬಗ್ಗೆ ಮಾಹಿತಿ ನೀಡುತ್ತದೆ, ಉದಾಹರಣೆಗೆ ಅದರ URL, ಸ್ಟೇಟ್, ಮತ್ತು ಅನನ್ಯ ID.

• `url`: ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಯ URL.
• `key`: ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಗಾಗಿ ಒಂದು ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆ.
• `id`: ಇನ್ನೊಂದು ಅನನ್ಯ ಗುರುತಿಸುವಿಕೆ, ವಿಶೇಷವಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ನ ಜೀವನಚಕ್ರವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಉಪಯುಕ್ತ.
• `sameDocument`: ನ್ಯಾವಿಗೇಷನ್ ಅದೇ ಡಾಕ್ಯುಮೆಂಟ್ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆಯೇ ಎಂದು ಸೂಚಿಸುವ ಒಂದು ಬೂಲಿಯನ್.
• `getState()`: ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಯೊಂದಿಗೆ ಸಂಯೋಜಿತವಾದ ಸ್ಟೇಟ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ (ನ್ಯಾವಿಗೇಷನ್ ಸಮಯದಲ್ಲಿ ಹೊಂದಿಸಲಾಗಿದೆ).

3. ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳು

ನ್ಯಾವಿಗೇಷನ್ API ಹಲವಾರು ಈವೆಂಟ್‌ಗಳನ್ನು ಕಳುಹಿಸುತ್ತದೆ, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನ್ಯಾವಿಗೇಷನ್ ವರ್ತನೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಲು ಮತ್ತು ನಿಯಂತ್ರಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಈ ಈವೆಂಟ್‌ಗಳು ಸೇರಿವೆ:

• `navigate`: ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ (ಉದಾಹರಣೆಗೆ, ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಫಾರ್ಮ್ ಸಲ್ಲಿಸಿದಾಗ, ಅಥವಾ `navigation.navigate()` ಅನ್ನು ಕರೆದಾಗ) ಕಳುಹಿಸಲಾಗುತ್ತದೆ. ನ್ಯಾವಿಗೇಷನ್ ವಿನಂತಿಗಳನ್ನು ತಡೆಹಿಡಿಯಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಇದು ಪ್ರಾಥಮಿಕ ಈವೆಂಟ್ ಆಗಿದೆ.
• `navigatesuccess`: ನ್ಯಾವಿಗೇಷನ್ ಯಶಸ್ವಿಯಾಗಿ ಪೂರ್ಣಗೊಂಡಾಗ ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
• `navigateerror`: ನ್ಯಾವಿಗೇಷನ್ ವಿಫಲವಾದಾಗ (ಉದಾಹರಣೆಗೆ, ನೆಟ್‌ವರ್ಕ್ ದೋಷ ಅಥವಾ ನಿರ್ವಹಿಸದ ವಿನಾಯಿತಿಯಿಂದಾಗಿ) ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
• `currentchange`: ಪ್ರಸ್ತುತ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿ ಬದಲಾದಾಗ (ಉದಾಹರಣೆಗೆ, ಮುಂದಕ್ಕೆ ಅಥವಾ ಹಿಂದಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ) ಕಳುಹಿಸಲಾಗುತ್ತದೆ.
• `dispose`: `NavigationHistoryEntry` ಇನ್ನು ಮುಂದೆ ತಲುಪಲಾಗದಿದ್ದಾಗ, ಉದಾಹರಣೆಗೆ `replaceState` ಕಾರ್ಯಾಚರಣೆಯ ಸಮಯದಲ್ಲಿ ಹಿಸ್ಟರಿಯಿಂದ ತೆಗೆದುಹಾಕಿದಾಗ, ಕಳುಹಿಸಲಾಗುತ್ತದೆ.

ನ್ಯಾವಿಗೇಷನ್ API ಯೊಂದಿಗೆ ರೂಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು: ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ

ಒಂದು ಸರಳ SPA ಯಲ್ಲಿ ಮೂಲಭೂತ ರೂಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನ್ಯಾವಿಗೇಷನ್ API ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸೋಣ. ಮೂರು ವೀಕ್ಷಣೆಗಳನ್ನು ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರಿಗಣಿಸಿ: ಹೋಮ್, ಅಬೌಟ್, ಮತ್ತು ಕಾಂಟ್ಯಾಕ್ಟ್.

ಮೊದಲಿಗೆ, ರೂಟ್ ಬದಲಾವಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಒಂದು ಫಂಕ್ಷನ್ ರಚಿಸಿ:

function handleRouteChange(url) {
  const contentDiv = document.getElementById('content');
  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
  }
}

ಮುಂದೆ, `navigate` ಈವೆಂಟ್‌ಗೆ ಒಂದು ಈವೆಂಟ್ ಲಿಸನರ್ ಸೇರಿಸಿ:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  event.preventDefault(); // Prevent default browser navigation

  const promise = new Promise((resolve) => {
      handleRouteChange(url);
      resolve(); // Resolve the promise after route handling
  });

  event.transition = promise;
});

ಈ ಕೋಡ್ `navigate` ಈವೆಂಟ್ ಅನ್ನು ತಡೆಹಿಡಿಯುತ್ತದೆ, `event.destination` ಆಬ್ಜೆಕ್ಟ್‌ನಿಂದ URL ಅನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ, ಡೀಫಾಲ್ಟ್ ಬ್ರೌಸರ್ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ, ವಿಷಯವನ್ನು ನವೀಕರಿಸಲು `handleRouteChange` ಅನ್ನು ಕರೆಯುತ್ತದೆ, ಮತ್ತು `event.transition` ಪ್ರಾಮಿಸ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ. `event.transition` ಅನ್ನು ಹೊಂದಿಸುವುದರಿಂದ ಬ್ರೌಸರ್ ದೃಷ್ಟಿಗೋಚರವಾಗಿ ಪುಟವನ್ನು ನವೀಕರಿಸುವ ಮೊದಲು ವಿಷಯ ನವೀಕರಣ ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ ಕಾಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಅಂತಿಮವಾಗಿ, ನೀವು ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸುವ ಲಿಂಕ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು:

Home | About | Contact

ಮತ್ತು ಆ ಲಿಂಕ್‌ಗಳಿಗೆ ಕ್ಲಿಕ್ ಲಿಸನರ್ ಅನ್ನು ಲಗತ್ತಿಸಿ:

document.addEventListener('click', (event) => {
  if (event.target.tagName === 'A' && event.target.hasAttribute('data-navigo')) {
    event.preventDefault();
    window.navigation.navigate(event.target.href);
  }
});

ಇದು ನ್ಯಾವಿಗೇಷನ್ API ಬಳಸಿ ಮೂಲಭೂತ ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೂಟಿಂಗ್ ಅನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ. ಈಗ, ಲಿಂಕ್‌ಗಳ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡುವುದರಿಂದ ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್ ಇಲ್ಲದೆ `content` ಡಿವ್‌ನ ವಿಷಯವನ್ನು ನವೀಕರಿಸುವ ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್ ಅನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.

ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಸೇರಿಸುವುದು

ನ್ಯಾವಿಗೇಷನ್ APIಯು ಪ್ರತಿ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಯೊಂದಿಗೆ ಸ್ಟೇಟ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳಾದ್ಯಂತ ಡೇಟಾವನ್ನು ಸಂರಕ್ಷಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಸೇರಿಸಲು ಮಾರ್ಪಡಿಸೋಣ.

`navigation.navigate()` ಅನ್ನು ಕರೆಯುವಾಗ, ನೀವು `state` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರವಾನಿಸಬಹುದು:

window.navigation.navigate('/about', { state: { pageTitle: 'About Us' } });

`navigate` ಈವೆಂಟ್ ಲಿಸನರ್ ಒಳಗೆ, ನೀವು `event.destination.getState()` ಬಳಸಿ ಸ್ಟೇಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಬಹುದು:

window.navigation.addEventListener('navigate', (event) => {
  const url = new URL(event.destination.url).pathname;
  const state = event.destination.getState();
  event.preventDefault();

  const promise = new Promise((resolve) => {
      handleRouteChange(url, state);
      resolve();
  });
  event.transition = promise;

});

function handleRouteChange(url, state = {}) {
  const contentDiv = document.getElementById('content');
  let title = state.pageTitle || 'My App'; // Default title

  switch (url) {
    case '/':
      contentDiv.innerHTML = '
Home
Welcome to the Home page!
';
      title = 'Home';
      break;
    case '/about':
      contentDiv.innerHTML = '
About
Learn more about us.
';
      break;
    case '/contact':
      contentDiv.innerHTML = '
Contact
Get in touch with us.
';
      break;
    default:
      contentDiv.innerHTML = '
404 Not Found
Page not found.
';
      title = '404 Not Found';
  }
  document.title = title;
}

ಈ ಮಾರ್ಪಡಿಸಿದ ಉದಾಹರಣೆಯಲ್ಲಿ, `handleRouteChange` ಫಂಕ್ಷನ್ ಈಗ `state` ಪ್ಯಾರಾಮೀಟರ್ ಅನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ ಶೀರ್ಷಿಕೆಯನ್ನು ನವೀಕರಿಸಲು ಅದನ್ನು ಬಳಸುತ್ತದೆ. ಯಾವುದೇ ಸ್ಟೇಟ್ ಅನ್ನು ರವಾನಿಸದಿದ್ದರೆ, ಅದು 'My App' ಗೆ ಡೀಫಾಲ್ಟ್ ಆಗುತ್ತದೆ.

`navigation.updateCurrentEntry()` ಬಳಸುವುದು

ಕೆಲವೊಮ್ಮೆ ನೀವು ಹೊಸ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಪ್ರಚೋದಿಸದೆಯೇ ಪ್ರಸ್ತುತ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಯ ಸ್ಟೇಟ್ ಅನ್ನು ನವೀಕರಿಸಲು ಬಯಸಬಹುದು. `navigation.updateCurrentEntry()` ವಿಧಾನವು ನಿಮಗೆ ಇದನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ಬದಲಾಯಿಸಿದರೆ, ಆ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸಲು ನೀವು ಸ್ಟೇಟ್ ಅನ್ನು ನವೀಕರಿಸಬಹುದು:

function updateUserSetting(setting, value) {
  const currentState = navigation.currentEntry.getState() || {};
  const newState = { ...currentState, [setting]: value };
  navigation.updateCurrentEntry({ state: newState });
  console.log('Updated setting:', setting, 'to', value);
}

// Example usage:
updateUserSetting('theme', 'dark');

ಈ ಫಂಕ್ಷನ್ ಪ್ರಸ್ತುತ ಸ್ಟೇಟ್ ಅನ್ನು ಹಿಂಪಡೆಯುತ್ತದೆ, ನವೀಕರಿಸಿದ ಸೆಟ್ಟಿಂಗ್ ಅನ್ನು ವಿಲೀನಗೊಳಿಸುತ್ತದೆ, ಮತ್ತು ನಂತರ ಹೊಸ ಸ್ಟೇಟ್‌ನೊಂದಿಗೆ ಪ್ರಸ್ತುತ ಹಿಸ್ಟರಿ ಎಂಟ್ರಿಯನ್ನು ನವೀಕರಿಸುತ್ತದೆ.

ಮುಂದುವರಿದ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

1. ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು

ನ್ಯಾವಿಗೇಷನ್ API ಅನ್ನು SPAs ಗಳಲ್ಲಿ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಬಹುದು, ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಹೆಚ್ಚು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆ ಈವೆಂಟ್ ಅನ್ನು ತಡೆಹಿಡಿಯಬಹುದು ಮತ್ತು URL ಅನ್ನು ನವೀಕರಿಸಲು ಮತ್ತು ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್ ಇಲ್ಲದೆ ಫಲಿತಾಂಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು `navigation.navigate()` ಅನ್ನು ಬಳಸಬಹುದು.

2. ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳು

ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ, ನೀವು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾಗಬಹುದು, ಉದಾಹರಣೆಗೆ API ನಿಂದ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳುವುದು. `event.transition` ಪ್ರಾಪರ್ಟಿ ನಿಮಗೆ ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ನೊಂದಿಗೆ ಪ್ರಾಮಿಸ್ ಅನ್ನು ಸಂಯೋಜಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಇದು ಪುಟವನ್ನು ನವೀಕರಿಸುವ ಮೊದಲು ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆ ಪೂರ್ಣಗೊಳ್ಳುವವರೆಗೆ ಬ್ರೌಸರ್ ಕಾಯುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಮೇಲಿನ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ.

3. ಸ್ಕ್ರಾಲ್ ಪುನಃಸ್ಥಾಪನೆ

ನ್ಯಾವಿಗೇಷನ್ ಸಮಯದಲ್ಲಿ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ನಿರ್ವಹಿಸುವುದು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ನ್ಯಾವಿಗೇಷನ್ API ಹಿಸ್ಟರಿಯಲ್ಲಿ ಹಿಂದಕ್ಕೆ ಅಥವಾ ಮುಂದಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ಪುನಃಸ್ಥಾಪಿಸಲು ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನವನ್ನು ಸಂಗ್ರಹಿಸಲು ಮತ್ತು ಪುನಃಸ್ಥಾಪಿಸಲು `NavigationHistoryEntry` ಯ `scroll` ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಬಹುದು.

4. ದೋಷ ನಿರ್ವಹಣೆ

ನ್ಯಾವಿಗೇಷನ್ ಸಮಯದಲ್ಲಿ ಸಂಭವಿಸಬಹುದಾದ ದೋಷಗಳನ್ನು, ಉದಾಹರಣೆಗೆ ನೆಟ್‌ವರ್ಕ್ ದೋಷಗಳು ಅಥವಾ ನಿರ್ವಹಿಸದ ವಿನಾಯಿತಿಗಳನ್ನು, ನಿರ್ವಹಿಸುವುದು ಅತ್ಯಗತ್ಯ. `navigateerror` ಈವೆಂಟ್ ನಿಮಗೆ ಈ ದೋಷಗಳನ್ನು ಹಿಡಿದು ಸುಲಲಿತವಾಗಿ ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ಅಥವಾ ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

5. ಪ್ರಗತಿಪರ ವರ್ಧನೆ

ನ್ಯಾವಿಗೇಷನ್ API ಯೊಂದಿಗೆ SPAs ಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ. ಬ್ರೌಸರ್‌ನಿಂದ ನ್ಯಾವಿಗೇಷನ್ API ಬೆಂಬಲಿಸದಿದ್ದರೂ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. `navigation` ಆಬ್ಜೆಕ್ಟ್‌ನ ಉಪಸ್ಥಿತಿಯನ್ನು ಪರಿಶೀಲಿಸಲು ನೀವು ಫೀಚರ್ ಡಿಟೆಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಅಗತ್ಯವಿದ್ದರೆ ಸಾಂಪ್ರದಾಯಿಕ ರೂಟಿಂಗ್ ವಿಧಾನಗಳಿಗೆ ಹಿಂತಿರುಗಬಹುದು.

ಸಾಂಪ್ರದಾಯಿಕ ರೂಟಿಂಗ್ ವಿಧಾನಗಳೊಂದಿಗೆ ಹೋಲಿಕೆ

SPAs ಗಳಲ್ಲಿನ ಸಾಂಪ್ರದಾಯಿಕ ರೂಟಿಂಗ್ ವಿಧಾನಗಳು ಸಾಮಾನ್ಯವಾಗಿ `window.location` ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ಬಳಸುವುದರ ಮೇಲೆ ಅಥವಾ `react-router` ಅಥವಾ `vue-router` ನಂತಹ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಲೈಬ್ರರಿಗಳನ್ನು ಅವಲಂಬಿಸಿವೆ. ಈ ವಿಧಾನಗಳು ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲ್ಪಟ್ಟಿವೆ ಮತ್ತು ಸುಸ್ಥಾಪಿತವಾಗಿದ್ದರೂ, ಅವುಗಳಿಗೆ ಕೆಲವು ಮಿತಿಗಳಿವೆ:

• ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳು: `window.location` ಅನ್ನು ನೇರವಾಗಿ ಬಳಸುವುದರಿಂದ ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸಬಹುದು, ಇದು ನಿಧಾನ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವಕ್ಕೆ ಅಡ್ಡಿಪಡಿಸಬಹುದು.
• ಸಂಕೀರ್ಣತೆ: ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನಗಳೊಂದಿಗೆ ಹಿಸ್ಟರಿ ಮತ್ತು ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವುದು ಸಂಕೀರ್ಣ ಮತ್ತು ದೋಷ-ಪೀಡಿತವಾಗಿರಬಹುದು, ವಿಶೇಷವಾಗಿ ದೊಡ್ಡ ಮತ್ತು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯ ಓವರ್‌ಹೆಡ್: ಮೂರನೇ ವ್ಯಕ್ತಿಯ ರೂಟಿಂಗ್ ಲೈಬ್ರರಿಗಳು ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಓವರ್‌ಹೆಡ್ ಅನ್ನು ಸೇರಿಸಬಹುದು, ವಿಶೇಷವಾಗಿ ಅವು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ನಿರ್ದಿಷ್ಟ ಅಗತ್ಯಗಳಿಗಾಗಿ ಆಪ್ಟಿಮೈಸ್ ಮಾಡದಿದ್ದರೆ.

ನ್ಯಾವಿಗೇಷನ್ API ರೂಟಿಂಗ್ ಮತ್ತು ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್‌ಗಾಗಿ ಹೆಚ್ಚು ಸುಸಂಘಟಿತ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು ವೈಶಿಷ್ಟ್ಯ-ಸಮೃದ್ಧ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಈ ಮಿತಿಗಳನ್ನು ನಿವಾರಿಸುತ್ತದೆ. ಇದು ಪೂರ್ಣ ಪುಟ ಮರುಲೋಡ್‌ಗಳನ್ನು ತೆಗೆದುಹಾಕುತ್ತದೆ, ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಮತ್ತು ನ್ಯಾವಿಗೇಷನ್ ಈವೆಂಟ್‌ಗಳ ಮೇಲೆ ಸೂಕ್ಷ್ಮ-ನಿಯಂತ್ರಣವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆ

2024 ರ ಅಂತ್ಯದ ವೇಳೆಗೆ, ನ್ಯಾವಿಗೇಷನ್ API ಕ್ರೋಮ್, ಫೈರ್‌ಫಾಕ್ಸ್, ಸಫಾರಿ, ಮತ್ತು ಎಡ್ಜ್ ಸೇರಿದಂತೆ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉತ್ತಮ ಬೆಂಬಲವನ್ನು ಹೊಂದಿದೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ನ್ಯಾವಿಗೇಷನ್ API ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಮೊದಲು Can I use ನಂತಹ ಸಂಪನ್ಮೂಲಗಳಲ್ಲಿ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಹೊಂದಾಣಿಕೆಯ ಮಾಹಿತಿಯನ್ನು ಪರಿಶೀಲಿಸುವುದು ಯಾವಾಗಲೂ ಉತ್ತಮ ಅಭ್ಯಾಸವಾಗಿದೆ. ಹಳೆಯ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಕಡ್ಡಾಯವಾಗಿದ್ದರೆ, ಪಾಲಿಫಿಲ್ ಅಥವಾ ಫಾಲ್‌ಬ್ಯಾಕ್ ಯಾಂತ್ರಿಕ ವ್ಯವಸ್ಥೆಯನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ತೀರ್ಮಾನ

ನ್ಯಾವಿಗೇಷನ್ API ಸುಧಾರಿತ ರೂಟಿಂಗ್ ಮತ್ತು ಹಿಸ್ಟರಿ ಮ್ಯಾನೇಜ್ಮೆಂಟ್ ಸಾಮರ್ಥ್ಯಗಳೊಂದಿಗೆ ಆಧುನಿಕ, ಕಾರ್ಯಕ್ಷಮತೆಯ SPAs ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಸಾಧನವಾಗಿದೆ. API ಯ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ವೇಗವಾದ, ಸುಗಮವಾದ ಮತ್ತು ಹೆಚ್ಚು ಆಕರ್ಷಕ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸಬಹುದು. ಸರಳ, ಹಳೆಯ ವಿಧಾನಗಳನ್ನು ಬಳಸುವುದಕ್ಕೆ ಹೋಲಿಸಿದರೆ ಆರಂಭಿಕ ಕಲಿಕೆಯ ರೇಖೆಯು ಸ್ವಲ್ಪ ಕಡಿದಾಗಿರಬಹುದಾದರೂ, ನ್ಯಾವಿಗೇಷನ್ API ಯ ಪ್ರಯೋಜನಗಳು, ವಿಶೇಷವಾಗಿ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಅದನ್ನು ಯೋಗ್ಯ ಹೂಡಿಕೆಯನ್ನಾಗಿ ಮಾಡುತ್ತದೆ. ನ್ಯಾವಿಗೇಷನ್ API ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ SPAs ಗಳ ಸಂಪೂರ್ಣ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.

ಹೆಚ್ಚಿನ ಕಲಿಕೆ

• MDN ವೆಬ್ ಡಾಕ್ಸ್: ನ್ಯಾವಿಗೇಷನ್ API
• WICG ನ್ಯಾವಿಗೇಷನ್ API ಸ್ಪೆಸಿಫಿಕೇಶನ್